<div class="modal-dialog" style="margin-left: 18%;">
    <? $this->load->helper('url'); ?>
    <div class="modal-content" style="width:150%">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Evaluation</h4>
            </div>
        <div class="modal-body"> 
            <div class="row">
            <div class="col-md-4"><label>Student's Current Color:</label></div>
                                            <div class="col-md-3" style="background-color:<? echo $color['colorhex'] ?>;">&nbsp;</div>

                                            <div class="col-md-12" style="padding-top:1%;"><label>Student's Goals:</label></div>
                                           <?$counter=1; foreach($criterias as $criteria ){?>
                                            <?if ($counter<4){
                                                if($counter==1){?>
                                            <div class='col-md-12'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==3){?>
                                            </div>
                                                <?}?>
                                            <?}else if ($counter<7){
                                                if($counter==4){?>
                                            <div class='col-md-12'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==6){?>
                                            </div>
                                                <?}?>
                                            <?}else if ($counter<10){
                                                if($counter==7){?>
                                            <div class='col-md-12'>
                                                <?}?>
                                                <div class="col-md-4" >
                                                
                                                <label class="checkbox-inline" onclick="click(function() {
                                    return false;
                                });">
                                                    <input type="checkbox"  <? if (($criteria['state'] == 'A' && $criteria['doesExist'] == 'Y') || $criteria['doesExist'] == 'N') echo 'checked' ?>/><span class="check"><?echo $criteria['criteria_name']?></span>
                                                </label>
                                            </div>
                                                <?if($counter==9){?>
                                            </div>
                                                <?}?>
                                            <?}?>
                                            <?$counter+=1;}?>

                                            <div class="col-md-4" style="padding-top:1%;"><label>Score Summary for this level:</label>
                                            </div>

                                            <div class="col-md-12" >
                                                <? if (!empty($chart)) {
                                                    $reverse_chart = array_reverse($chart);
                                                    if (count($reverse_chart) == 1) {
                                                        foreach ($reverse_chart as $score) {
                                                            $labels = '["' . $score['title'] . '","",""]';
                                                            $dataset ='[' . $score['score'] . ',0,0]';
                                                        }
                                                    } else {
                                                        $labels = '[';
                                                        $dataset = '[';
                                                        $lastElement = end($reverse_chart);
                                                        foreach ($reverse_chart as $score => $value) {
                                                            if ($lastElement == $value) {
                                                                $labels .= '"' . $value['title'] . '';
                                                                $dataset .= '' . $value['score'] . '';
                                                            } else {
                                                                $labels .= '"' . $value['title'] . '",';
                                                                $dataset .= '' . $value['score'] . ',';
                                                            }
                                                        }$labels .= '"]';
                                                        $dataset .= ']';
                                                    }
                                                    ?>
                                                    <canvas id="canvas" height="300" width="800"></canvas>
                                                    <script>

                                                                        var barChartData = {
                                                                            labels: <? echo $labels; ?>,
                                                                            datasets: [
                                                                                {
                                                                                    fillColor: "rgba(19,152,126,.5)",
                                                                                    strokeColor: "rgba(220,220,220,1)",
                                                                                    data: <? echo $dataset; ?>,
                                                                                }
                                                                            ]

                                                                        }
                                                                         var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
                                                                        </script>
                                                <?}else echo '<h3 class="text-center text-danger">NO SCORES TO DISPLAY YET.</h3>'?>
                    </div>
            </div>
            </div>
         <div class="modal-footer">
                    <button  type="button" class="btn btn-primary btn-sm" data-dismiss="modal" aria-hidden="true">OK</button>
                </div> 
        </div>
    </div>

<script>
       /*event.preventDefault();
       $('#studentProgress').modal({ }).css({
       'padding-top': function () { 
           return '15' + '%';  
       }
        });*/
</script>